@extends("base.base")
@include('Commodity.header')
@section('main')
    <link rel="stylesheet" href="{{asset(env("CDN_HOST")."/resources/swiper-4.1.6/css/swiper.min.css")}}">
    <link rel="stylesheet" href="{{asset(env('CDN_HOST')."/public/css/commodity/commodity.css")}}">
    <div class="div_spac">
        <main id="main_spac" class="main_spac">
            <div class="spac-title">
                <div class="spac-t-img">
                    @if(isset($info))
                        <img src="{{asset(reset($info)['info_img_url'])}}" alt="">
                    @endif
                </div>
                <div class="spac-t-info">
                    <p>价格：¥<span class="spac-t-price"></span></p>
                    <p>已选择：<span class="spac-t-select"><span class="spac-t-none">请选择规格数量</span><span
                                    class="spac-t-color"></span>&ensp;<span class="spac-t-size"></span><span
                                    class="spac-t-number"></span></span></p>
                </div>
            </div>
            <div class="clear-both"></div>
            <div class="spac-color">
                <h5 class="spac-color-title">颜色</h5>
                <div class="spac-color-list">
                    @foreach($color as $k => $v)
                        <span class="spac-btn spac-btn-color"
                              data-color-id="{{$v['commodity_color_id']}}">{{$v['commodity_color_name']}}</span>
                    @endforeach
                </div>
            </div>
            <div class="spac-size">
                <h5 class="spac-size-title">尺码</h5>
                <div class="spac-size-list">
                    @foreach($size as $k => $v)
                        <span class="spac-btn spac-btn-size"
                              data-size-id="{{$v['commodity_size_id']}}">{{$v['commodity_size_name']}}</span>
                    @endforeach
                </div>
            </div>
            <div class="spac-number">
                <h5 class="spac-number-title">数量</h5>
                <div class="m-selnum msd-none m-selnum-1 dl">
                    <div class="m-selnum-minus msm-none">
                        -
                    </div>
                    <div class="textWrap">
                        <input class="textWrapInput" type="text" value="1">
                    </div>
                    <div class="m-selnum-plus more">
                        +
                    </div>
                </div>
            </div>
        </main>
        @include('Commodity.bottom_spac')
    </div>
    <div class="div_div">
        <main id="main" class="main">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    @if(isset($info))
                        @foreach (array_slice($info,0,4) as $k => $v)
                            <div class="swiper-slide">
                                <img class="swiper-slide-img"
                                     src="{{asset($v['info_img_url'])}}"
                                     alt="">
                            </div>
                        @endforeach
                    @else
                        <div class="swiper-slide">
                            <img class="swiper-slide-img"
                                 src="{{$commodity['index_img_url']}}"
                                 alt="">
                        </div>
                    @endif
                </div>
                <div class="swiper-pagination"></div>
            </div>
            <div class="h-2-f4f4f4"></div>
            <div class="commodity-info">
                <div class="ci-title">
                    <p class="ci-title-name">{{$commodity['commodity_name']}}</p>
                    <p class="ci-title-info">{{$commodity['commodity_title']}}</p>
                    <p class="ci-title-price">
                        ¥@if(isset($info)){{reset($info)['commodity_info_price']}}@endif</p>
                </div>
                <div class="ci-comment">
                    <p class="ci-comment-num">2</p>
                    <p class="ci-comment-info">用户评价</p>
                    <p class="ci-comment-button">
                        <button class="btn btn-default btn-xs">查看</button>
                    </p>
                </div>
                <div class="clear-both"></div>
            </div>
            <div class="h-2-f4f4f4"></div>
            <div class="commodity-spec">
                <span class="commodity-fa-right"><i class="fa fa-angle-right" aria-hidden="true"></i></span>
                <span class="commodity-spec-info">请选择规格数量</span>
            </div>
            <div class="h-2-f4f4f4"></div>
            <div class="commodity-comment">
                <div class="cc-title">
                    <span class="commodity-fa-right"><i class="fa fa-angle-right" aria-hidden="true"></i></span>
                    <span class="see-all-comment">查看全部</span>
                    <span>用户评论</span>
                </div>
                <div class="cc-list">
                    <p class="cc-list-title">
                        <span class="user-img"><img src="{{asset($user['avatar'])}}" alt=""></span>
                        <span class="user-name">{{$user['nickname']}}</span>
                    </p>
                    <p class="cc-list-spac">
                        <span class="ccl-date">2018-03-27 10:50:58</span>
                        <span class="ccl-spac">海蓝色; M（170/92A）</span>
                    </p>
                    <p>衬衣料子很有弹性，剪裁版型不错</p>
                </div>
            </div>
            <div class="h-2-f4f4f4"></div>
            <div class="commodity-content ue-content">
                <?=$commodity['commodity_desc'] ?>
            </div>
        </main>
        @include('Commodity.bottom')

    </div>
    <script src="{{asset(env("CDN_HOST")."/resources/swiper-4.1.6/js/swiper.min.js")}}"></script>
    {{--<script src="{{asset("/js/swiper/dist/js/swiper.min.js")}}"></script>--}}
    <script>
        var swiper = new Swiper('.swiper-container', {
            speed: 400,
            spaceBetween: 0,
            autoplay: {
                delay: 4000,
                disableOnInteraction: false,
            },
            loop: true,
            slidesPerView: 1,
            effect: 'slide',
            pagination: {
                el: '.swiper-pagination'
            },
        });
    </script>
    <script>
        var commodity = {
            id: {{$commodity['commodity_id']}},
            info: 0,
            color: 0,
            size: 0,
            number: 1,
            price: 0,
            all_price: 0,
            _token: csrf_token
        }
        var info = <?php echo isset($info) ? array_to_json($info) : '{}'?>;
        var size = <?php echo isset($resSize) ? array_to_json($resSize) : '{}'?>;
        var color = <?php echo isset($resColor) ? array_to_json($resColor) : '{}'?>;

        function add_cart() {
            loading.show()
            if (commodity.color === 0 || commodity.info === 0 || commodity.size === 0 || commodity.number === 0) {
                alert("请选择规格数量")
                return false
            }
            $.post("/api/add_cart", commodity, function (e) {
                if (e.errorCode == 0) {
                    alert("添加购物车成功")
                } else {
                    alert(e.errorMsg)
                }
                loading.hide()
            })
        }

        function add_cart_buy() {
            loading.show()
            if (commodity.color === 0 || commodity.info === 0 || commodity.size === 0 || commodity.number === 0) {
                alert("请选择规格数量")
                return false
            }
            $.post("/api/add_cart", commodity, function (e) {
                if (e.errorCode == 0) {
                    var cart_id = e.data.cart_id
                    set_cart(cart_id)
                } else {
                    loading.hide()
                    alert(e.errorMsg)
                }
            })
        }

        function set_cart(cart_id) {
            if (cart_id == "" || typeof cart_id == "undefined") {
                loading.hide()
                return false
            }
            var data = {}

            data[0] = cart_id
            data["_token"] = csrf_token
            $.post("/api/set_cart_session", data, function (e) {
                if (e.errorCode == 0) {
                    window.location.href = "/cart/right"
                } else {
                    loading.hide()
                    alert(e.errorMsg)
                }
            })
        }
        //修改商品信息
        function turn_commodity() {
            turn_close()
            if (commodity.color == 0 || commodity.size == 0) {
                if (commodity.color == 0 && commodity.size == 0) {
                    commodity.info = 0
                    $('.spac-t-none').text('请选择规格数量')
                }
                $('.spac-t-price').text('')
                $('.spac-number').hide()
                $('.spac-t-number').text("x" + commodity.number)
                $('.commodity-spec-info').text($('.spac-t-select').text())
                return false
            }

            var info_data = info['v' + commodity.color + '_' + commodity.size];
            // console.dir(info_data)
            commodity.number = $('.textWrapInput').val()
            commodity.info = info_data.commodity_info_id
            commodity.price = info_data.commodity_info_price
            commodity.all_price = commodity.price * commodity.number

            $('.spac-t-price').text(commodity.all_price)
            $('.spac-number').show()
            $('.spac-t-number').text("x" + commodity.number)
            $('.commodity-spec-info').text($('.spac-t-select').text())
        }

        //修改class
        function turn_close() {
            if (commodity.color != 0) {
                $('.spac-size-list span').addClass("spac-btn-size-close");
                var size_data = color['c' + commodity.color]
                if (typeof size_data == 'undefined') {
                    return false;
                }
                for (k in size_data) {
                    $('.spac-btn-size-close[data-size-id=' + size_data[k] + ']').removeClass("spac-btn-size-close");
                }
            } else {
                $('.spac-size-list span').removeClass('spac-btn-size-close')
            }

            if (commodity.size != 0) {
                $('.spac-color-list span').addClass("spac-btn-color-close")
                var color_data = size['s' + commodity.size]
                if (typeof color_data == 'undefined') {
                    return false;
                }
                for (k in color_data) {
                    $('.spac-btn-color-close[data-color-id=' + color_data[k] + ']').removeClass("spac-btn-color-close");
                }
            } else {
                $('.spac-color-list span').removeClass('spac-btn-color-close')
            }
        }

        //颜色点击
        $('.spac-btn-color').on('click', function () {
            if ($(this).hasClass("spac-btn-color-close"))
                return false
            if ($(this).hasClass("spac-btn-c-active")) {
                $(this).removeClass("spac-btn-c-active")
                commodity.color = 0
                $('.spac-t-color').text('')
            } else {
                $('.spac-btn-c-active').removeClass("spac-btn-c-active")
                $(this).addClass('spac-btn-c-active')
                commodity.color = parseInt($(this).attr('data-color-id'))
                $('.spac-t-color').text($(this).text())
                $('.spac-t-none').text('')
            }
            turn_commodity()
        })
        //尺码点击
        $('.spac-btn-size').on('click', function () {
            if ($(this).hasClass("spac-btn-size-close"))
                return false
            if ($(this).hasClass("spac-btn-s-active")) {
                $(this).removeClass("spac-btn-s-active")
                commodity.size = 0
                $('.spac-t-size').text('')
            } else {
                $('.spac-btn-s-active').removeClass("spac-btn-s-active")
                $(this).addClass('spac-btn-s-active')
                commodity.size = parseInt($(this).attr('data-size-id'))
                $('.spac-t-size').text($(this).text())
                $('.spac-t-none').text('')
            }
            turn_commodity()
        })
        $(".commodity-spec").on('click', function () {
            // $(".div_div").hide();
            $(".div_spac").show();
        })
        $(".m-selnum-plus").on('click', function () {
            parent = $(this).parents('.m-selnum')
            parent.find('input').val(parseInt(parent.find('input').val()) + 1)
            check_style(parent)
            turn_commodity()
        })

        $(".m-selnum-minus").on('click', function () {
            parent = $(this).parents('.m-selnum')
            if (parseInt(parent.find('input').val()) < 2)
                return false
            parent.find('input').val(parseInt(parent.find('input').val()) - 1)
            check_style(parent)
            turn_commodity()
        })

        function check_style($obj) {
            if (parseInt($obj.find('input').val()) > 1) {
                m_selnum_active($obj)
            } else {
                m_selnum_none($obj)
            }
        }

        function m_selnum_none($obj) {
            $obj.css('border-left', '0.1rem solid #f1f1f1');
            $obj.find('.m-selnum-minus').css({
                "border-top": "0.1rem solid #f1f1f1",
                "border-bottom": "0.1rem solid #f1f1f1",
                "color": "#f1f1f1"
            });
        }

        function m_selnum_active($obj) {
            $obj.css('border-left', '0.1rem solid #666666');
            $obj.find('.m-selnum-minus').css({
                "border-top": "0.1rem solid #666666",
                "border-bottom": "0.1rem solid #666666",
                "color": "#666666"
            });
        }

        loading.hide()
    </script>
@endsection